<template>
  <tiny-select
    render-type="tree"
    :model-value="modelValue"
    :value-field="valueKey"
    :text-field="labelKey"
    :tree-op="state"
    :style="{ width: width ? width + 'px' : '100%' }"
    :clearable="clearable"
    :placeholder="placeholder"
    @change="change"
  />
</template>

<script>
import tool from '@/utils/tool'
import { Select } from '@opentiny/vue'
export default {
  props: {
    width: { type: [String, Number], default: '' },
    modelValue: { type: [String, Number], default: '' },
    text: { type: [String, Number], default: '' },
    sql: { type: String, default: '' },
    size: { type: String, default: 'default' },
    valueKey: { type: String, default: 'id' },
    labelKey: { type: String, default: 'name' },
    height: { type: [String, Number], default: '' },
    disabled: { type: Boolean, default: false },
    clearable: { type: Boolean, default: true },
    list: { type: [String, Array], default: '' },
    readonly: { type: Boolean, default: false }, // 必填
    required: { type: Boolean, default: false }, // 必填
    border: { type: Boolean, default: true }, // 禁用
    placeholder: { type: String, default: '' }, // 自定义样式
    borderColor: { type: String, default: '' }, // 边框色
    bgColor: { type: String, default: '' }, // 背景色
    listWidth: { type: Number, default: 0 }, // 下拉框宽度
    cat: { type: String, default: '' }, // 取数据cat分类
    options: {
      type: Array,
      default: () => {
        return []
      }
    } // 如果传入值
  },
  components: {
    TinySelect: Select
  },
  data() {
    return {
      treeVal: null,
      state: {
        data: []
      },
    }
  },
  emits: ['update:modelValue', 'update:id', 'Esc', 'enter', 'change'],
  created() {
    this.getList()
  },
  methods: {
    getList () {
      tool.post('common/dropdown', { cat: this.cat, keyWord: '' }).then((ret) => {
        if (ret.stat) {
          this.state.data = ret.data
        }
      })
    },
    change (item) {
      this.$emit('update:modelValue', item? item[this.labelKey]:'')
      this.$emit('update:id',item? item[this.valueKey]:null)
      this.$emit('change', item?{ id: item[this.valueKey], name: item[this.labelKey] }:null)
    }
  }
}

</script>

<style scoped lang="scss">

</style>